import '../index.scss'
import { createContext, useContext } from 'react';

// App -> A -> B

// 1. createContext方法创建一个上下文对象
const MsgContext = createContext('')


// 2. 在顶层组件中 通过Provider组件提供数据

// 3. 在底层组件中 通过useContext方法接收数据

// 跨层组件通信
function A() {
    return (
        <div>
            我是A组件
            <B />
        </div>
    )
}

function B() {
    return (
        <div>
            我是B组件  {useContext(MsgContext)}
        </div>
    )
}





const App = () => {
    const name = '我是顶层App组件中的name'

    return (
        <div className="app">
            <MsgContext.Provider value={name}>
                <A />
            </MsgContext.Provider>

        </div>
    )
}

export default App